<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>语音切换测试</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background: #f5f5f5;
      }
      .container {
        background: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
      h1 {
        color: #333;
        text-align: center;
      }
      .voice-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin: 20px 0;
      }
      .voice-card {
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 15px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
      }
      .voice-card:hover {
        border-color: #007bff;
        background: #e3f2fd;
      }
      .voice-card.selected {
        border-color: #007bff;
        background: #bbdefb;
      }
      .voice-name {
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
      }
      .voice-desc {
        font-size: 12px;
        color: #666;
        margin-bottom: 10px;
      }
      .voice-params {
        font-size: 10px;
        color: #888;
      }
      .test-btn {
        background: #28a745;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 10px;
        width: 100%;
      }
      .test-btn:hover {
        background: #218838;
      }
      .test-all-btn {
        background: #007bff;
        color: white;
        border: none;
        padding: 15px 30px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 16px;
        margin: 20px auto;
        display: block;
      }
      .test-all-btn:hover {
        background: #0056b3;
      }
      .status {
        margin-top: 20px;
        padding: 10px;
        border-radius: 4px;
        text-align: center;
      }
      .status.success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
      }
      .status.error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>🎤 AI语音切换测试</h1>
      <p style="text-align: center; color: #666">
        点击下方按钮测试不同的AI语音效果
      </p>

      <div class="voice-grid" id="voiceGrid">
        <!-- 语音选项将通过JavaScript动态生成 -->
      </div>

      <button class="test-all-btn" onclick="testAllVoices()">
        🎭 测试所有音色
      </button>

      <div id="status"></div>
    </div>

    <script>
      // 语音角色配置
      const voiceCharacters = [
        {
          id: "xiaoyan",
          name: "小燕",
          desc: "温柔女声（默认）",
          category: "female",
        },
        {
          id: "aisjiuxu",
          name: "艾斯",
          desc: "御姐音，成熟女声",
          category: "female",
        },
        {
          id: "aisxping",
          name: "小萍",
          desc: "萝莉音，可爱女声",
          category: "female",
        },
        { id: "aisbabyxu", name: "小贝", desc: "甜美女声", category: "female" },
        { id: "aisjinger", name: "小静", desc: "温柔女声", category: "female" },
        { id: "aisxue", name: "小雪", desc: "清新女声", category: "female" },
        {
          id: "aisjiuxu_male",
          name: "大叔",
          desc: "成熟男声，磁性",
          category: "male",
        },
        {
          id: "aisxping_male",
          name: "青年",
          desc: "青年男声",
          category: "male",
        },
        {
          id: "aisbabyxu_male",
          name: "小帅",
          desc: "阳光男声",
          category: "male",
        },
        {
          id: "aisjinger_male",
          name: "小刚",
          desc: "稳重男声",
          category: "male",
        },
        {
          id: "xiaoyan_bubble",
          name: "气泡音",
          desc: "气泡音效果",
          category: "special",
        },
        {
          id: "xiaoyan_robot",
          name: "机器人",
          desc: "机械音效果",
          category: "special",
        },
        {
          id: "xiaoyan_cute",
          name: "萌音",
          desc: "可爱萌音",
          category: "special",
        },
        {
          id: "xiaoyan_deep",
          name: "深沉音",
          desc: "深沉磁性",
          category: "special",
        },
      ];

      let currentVoice = "xiaoyan";

      // 生成语音选择界面
      function generateVoiceGrid() {
        const grid = document.getElementById("voiceGrid");
        grid.innerHTML = "";

        voiceCharacters.forEach((voice) => {
          const card = document.createElement("div");
          card.className = "voice-card";
          card.onclick = () => selectVoice(voice.id);

          card.innerHTML = `
                    <div class="voice-name">${voice.name}</div>
                    <div class="voice-desc">${voice.desc}</div>
                    <div class="voice-params">分类: ${voice.category}</div>
                    <button class="test-btn" onclick="event.stopPropagation(); testVoice('${voice.id}')">
                        🔊 试听
                    </button>
                `;

          grid.appendChild(card);
        });
      }

      // 选择语音
      function selectVoice(voiceId) {
        currentVoice = voiceId;

        // 更新UI
        document.querySelectorAll(".voice-card").forEach((card) => {
          card.classList.remove("selected");
        });
        event.currentTarget.classList.add("selected");

        showStatus(
          `已选择: ${voiceCharacters.find((v) => v.id === voiceId).name}`,
          "success"
        );
      }

      // 测试单个语音
      async function testVoice(voiceId) {
        const voice = voiceCharacters.find((v) => v.id === voiceId);
        showStatus(`正在测试: ${voice.name}...`, "success");

        try {
          // 这里应该调用实际的语音测试API
          // 由于我们在测试页面，我们模拟一个测试
          console.log(`测试语音: ${voice.name} (${voiceId})`);

          // 模拟测试延迟
          await new Promise((resolve) => setTimeout(resolve, 1000));

          showStatus(`✅ ${voice.name} 测试完成`, "success");
        } catch (error) {
          showStatus(`❌ ${voice.name} 测试失败: ${error.message}`, "error");
        }
      }

      // 测试所有语音
      async function testAllVoices() {
        showStatus("🎭 开始测试所有音色...", "success");

        for (let i = 0; i < voiceCharacters.length; i++) {
          const voice = voiceCharacters[i];
          showStatus(
            `测试 ${i + 1}/${voiceCharacters.length}: ${voice.name}`,
            "success"
          );

          await testVoice(voice.id);

          // 等待2秒再播放下一个
          if (i < voiceCharacters.length - 1) {
            await new Promise((resolve) => setTimeout(resolve, 2000));
          }
        }

        showStatus("🎉 所有音色测试完成！", "success");
      }

      // 显示状态
      function showStatus(message, type) {
        const status = document.getElementById("status");
        status.textContent = message;
        status.className = `status ${type}`;
      }

      // 初始化
      generateVoiceGrid();
      showStatus("语音切换测试工具已就绪", "success");
    </script>
  </body>
</html>
